<template>
  <!-- prettier-ignore -->
  <el-dialog :visible.sync="dialog.资源改派.visible" width="992px" @open="handleOpen">
    <div slot="title">
      <b class="fc-gray10">资源改派</b>
      <small class="fc-gray50">请选择改派人员</small>
    </div>
    <div class="pl20 pr20">
      <el-form ref="form" inline>
        <el-form-item label="员工">
          <el-input size="small" placeholder="请输入" v-model="keyword" @keyup.13.native="queryAsKeyword"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="queryAsKeyword">
            <i class="fa fa-fw iconfont icon-search"></i>查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="myStyle" size="mini" style="width: 100%"
      header-row-class-name="info-row" highlight-current-row
      :data="tableData2">
      <el-table-column label="userid">
        <template slot-scope="scope">{{ scope.row.userid }}</template>
      </el-table-column>
      <el-table-column label="公司">
        <template slot-scope="scope">{{ scope.row.companyName }}</template>
      </el-table-column>
      <el-table-column label="部门">
        <template slot-scope="scope">{{ scope.row.company_Department_name }}</template>
      </el-table-column>
      <el-table-column label="员工姓名">
        <template slot-scope="scope">{{ scope.row.employee_Name }}</template>
      </el-table-column>
      <el-table-column label="真实姓名">
        <template slot-scope="scope">{{ scope.row.realName }}</template>
      </el-table-column>
      
      <el-table-column label="最后修改时间" width="200px">
        <template slot-scope="scope">{{ $moment(scope.row.editTime).format("YYYY-MM-DD hh:mm:ss") }}</template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="resourcesToSend(scope.row)">改派给ta</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="align-rm"
      @current-change="handleCurrentChange" :current-page.sync="page.current"
      :page-sizes="[10, 20]" :page-size.sync="page.size" :total="cPageTotal"
      layout="total, prev, pager, next, sizes">
    </el-pagination>
  </el-dialog>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'resourcesToSend',
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      keyword: '',
      sData: [],
      tableData: [],
      page: {
        current: 1,
        size: 10,
        // total: 40,
      },
    };
  },
  computed: {
    ...mapState(['dialog', 'conditional']),
    cPageTotal: function() {
      return this.tableData.length;
    },
    tableData2: function() {
      let s = this.tableData;
      let d = this.conditional.department.options;
      let p = this.page;
      return s
        .map(v => {
          let department = d.find(v1 => {
            return v1.value == v.company_Department_Id;
          });
          return Object.assign(v, {
            company_Department_name: _.get(department, 'label', ''),
          });
        })
        .slice((p.current - 1) * p.size, p.current * p.size);
    },
  },
  methods: {
    resourcesToSend(row) {
      let idList = this.dialog.资源改派.temp.join(',');
      let operMan = this.$store.getters['userInfo/getUserInfo']
        .company_Employee_Id;
      this.$confirm('', {
        message: `确认将资源[ ${idList} ]改派给ta`,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$loading();
          return this.$api.SCRMCustomerChange(
            {
              idList: idList,
              newCompanyEmployeeId: this._.get(row, 'company_Employee_Id', ''),
              operMan: operMan,
              userid: this._.get(row, 'userid', ''),
            },
            {},
          );
        })
        .then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '改派成功',
            });
          } else {
            this.$message({
              type: 'error',
              message: '改派失败',
            });
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            type: 'info',
            message: '改派取消',
          });
        })
        .finally(_ => {
          this.$loading().close();
        });
    },
    handleOpen() {
      this.sData.splice(0, this.sData.length);
      let a = this.$store.getters['userInfo/getUserInfo'];
      this.$api
        .getCompanyEmployeeList(
          {
            companyDepartmentCompany_Id: _.get(
              a,
              'company_Department_Company_Id',
              '',
            ),
          },
          {},
          2,
        )
        .then(res => {
          if (res.code == 200) {
            res.data.forEach(v => {
              this.sData.push(v);
            });
            this.queryAsKeyword();
          }
        })
        .catch(err => {
          console.error(err);
        })
        .finally(_ => {});
    },
    queryAsKeyword() {
      this.page.current = 1;
      let kw = _.toLower(this.keyword);
      // let s = this.conditional.ArrEmployee;
      let s = this.sData;
      let newArr;
      if (_.isEmpty(_.trim(kw))) {
        newArr = s;
      } else {
        newArr = _.filter(s, v => {
          return (
            _.includes(_.toLower(v.company_Employee_Id), kw) ||
            _.includes(_.toLower(v.employee_Name), kw) ||
            _.includes(_.toLower(v.realName), kw)
          );
        });
      }
      this.tableData.splice(0, this.tableData.length);
      newArr.forEach(v => {
        this.tableData.push(v);
      });
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
  },
  mounted() {},
};
</script>

<style></style>
